<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model="name" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model.number="age" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="sex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="btn">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in list" :key="item.id">
          <td> {{ item.id }} </td>
          <td> {{ item.name }} </td>
          <td> {{ item.age }} </td>
          <td> {{ item.sex }} </td>
          <td>
            <button @click="del(item.id)">删除</button>
            <button @click="on(item.id)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {

  data () {
    return {
      list: [
        {
          id: 1,
          name: "小明",
          age: 18,
          sex: "男",
        },
        {
          id: 2,
          name: "小丽",
          age: 17,
          sex: "女",
        },
        {
          id: 3,
          name: "小刚",
          age: 19,
          sex: "男",
        },
      ],
      name: "",
      age: "",
      sex: "男",
      flog: ""
    }
  },
  methods: {
    
    btn(){
      
      if(this.flog === ""){
        this.list.push({
                id: +new Date(),
                name: this.name,
                age: this.age,
                sex:  this.sex
                })
      } else {
        this.list.find(item => item.id === this.flog).name = this.name
        this.list.find(item => item.id === this.flog).age = this.age
        this.list.find(item => item.id === this.flog).sex = this.sex
      }
      
      this.name = ""
      this.age = ""
      this.sex = "男"
      this.flog = ""
    },
    del(id){
      this.list = this.list.filter(item => item.id !== id)
    },
    on(id){
      this.name = this.list.find(item => item.id === id).name 
      this.age = this.list.find(item => item.id === id).age 
      this.sex = this.list.find(item => item.id === id).sex 
      this.flog = id
    }
  }
  
}
</script>
